<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑菜单</title>
    <link rel="stylesheet" href="../../../static/web/layuitree/css/layui.css" th:href="@{/web/layuitree/css/layui.css}" />

    <script src="../../../static/web/layuitree/layui.js" th:src="@{/web/layuitree/layui.js}"></script>
    <script src="../../../static/web/jquery-3.3.1/jquery-3.3.1.js" th:src="@{/web/jquery-3.3.1/jquery-3.3.1.js}"></script>
    <script src="../../../static/web/kitadmin/js/common.js" th:src="@{/web/kitadmin/js/common.js}"></script>

</head>
<body>
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <input th:value="${menu.id}" type="hidden" name="id">
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend style="font-size:20px;font-weight: bold">
                    <i class="layui-icon layui-icon-form" style="font-size:20px;"></i>菜单信息
                </legend>
            </fieldset>
        </div>
        <div style="margin-left:25%">
            <div class="layui-form-item">
                <label for="menuType" class="layui-form-label">
                    <span style="color: red">*</span>类型
                </label>
                <div class="layui-input-block" style="width:190px;">
                    <select name="menuType" id="menuType" lay-verify="menuType"  lay-filter="menuType" disabled>
                        <option value=""></option>
                        <option value="2">一级菜单</option>
                        <option value="0">二级菜单</option>
                        <option value="1">按钮</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="pDiv">
                <label for="pName" class="layui-form-label">
                    父级菜单
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="pId" id="pId" th:value="${menu.pId}">
                    <input type="text" autocomplete="off" id="pName"  th:value="${pName}" lay-verify="pName" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span  style="color: red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <input type="text"  id="name" name="name"  th:value="${menu.getName()}" lay-verify="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="url" class="layui-form-label">
                    URL
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="url" name="url" th:value="${menu.getUrl()}" lay-verify="url"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">

                <label for="permission" class="layui-form-label">
                    <span style="color: red">*</span>权限
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="permission" name="permission" th:value="${menu.getPermission()}"  lay-verify="permission" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="icon" class="layui-form-label">
                    <span style="color: red">*</span>图标
                </label>
                <div class="layui-input-inline" id="iconDiv" style="border-right: 1px solid rgb(230,230,230);border-bottom: 1px solid rgb(230,230,230);border-top: 1px solid rgb(230,230,230);height: 36px">
                    <div style="margin-left: 20px;">
                        <ul>
                            <li style="display: inline-block;width: 90px;" id="menu-icon">
                                <i class="layui-icon" id="icon"  style="font-size: 26px;vertical-align: middle" th:utext="${menu.getIcon()}"></i>
                            </li>
                            <li style="display: inline-block;margin-left: 35px;" id="select_icon_li">
                                <i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon" lay-filter="select_icon" style="height: 36px;line-height: 36px;border-color: white">
                                    <i class="layui-icon layui-icon-search" ></i>
                                </i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="orderNum" class="layui-form-label">
                    <span style="color: red">*</span>排序
                </label>
                <div class="layui-input-inline">
                    <input type="orderNum" id="orderNum" name="orderNum" th:value="${menu.orderNum}" lay-verify="orderNum" autocomplete="off" class="layui-input" maxlength="4">
                </div>
            </div>
            <div style="height: 60px"></div>
        </div>

        <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;position: fixed;bottom: 1px;margin-left:-20px;">
            <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                <button  class="layui-btn " lay-filter="add" lay-submit style=" height:38px;line-hight:38px;">
                    <i class="layui-icon layui-icon-ok-circle" style="vertical-align: middle"></i> 保存
                </button>
                <button  class="layui-btn layui-btn-primary" id="close" style=" height:38px;line-hight:38px;">
                    <i class="layui-icon layui-icon-close-fill" style="vertical-align: middle"></i> 取消
                </button>
            </div>
        </div>
    </form>
</body>
<script type="text/javascript" th:inline="javascript">

    $(function () {
        layui.use([
            'form','tree'
            ], function(){
            var form = layui.form;

            $('#select_icon').click(function(){
                parent.layer.open({
                    id:'icon',
                    type: 2,
                    area: ['800px','600px'],
                    shade: 0.4,
                    title: '图标',
                    content: '/web/layui/icon.html'
                });
            });
            //自定义验证规则
            var type = $('#menuType');
            form.verify({
                menuType:function(v){
                    if(v==''){
                        return '类型不能为空';
                    }
                }
                ,pName:function(v){
                    if(type.val()!='2'&&v.trim()==''){
                        return '父菜单不能为空';
                    }
                }
                ,name:function(v){
                    if(v.trim()==''){
                        return '名称不能为空';
                    }
                }
                ,url:function(v){
                    if(type.val()=='1'){
                        $('#url').val('');
                    }
                    if(type.val()=='0'&&v.trim()==''){
                        return 'url不能为空';
                    }
                }
                ,permission:function(v){
                    if((type.val()=='1'||type.val()=='0')&&v.trim()==''){
                        return '权限不能为空';
                    }
                }
                ,orderNum: [
                    /^[0-9]*[1-9][0-9]*$/, '请填写排序(正整数)'
                ]
            });

            /*<![CDATA[*/
            var menuType = [[${menu.menuType}]];
            /*]]>*/

            $('#menuType').val(menuType);
            settingInput(menuType);

            function settingInput(data){
                if(data==2){
                    $('#pId').val('');
                    attrAction('pName',true);
                    attrAction('permission',true);
                    attrAction('url',true);
                    attrAction('iconDiv',false);
                    $('#select_icon_li').show();
                }else if(data==1){//按钮
                    attrAction('url',true);
                    attrAction('pName',false);
                    attrAction('permission',false);
                    attrAction('iconDiv',true);
                    $('#select_icon_li').hide();
                }else if(data==0){//二级菜单
                    attrAction('url',false);
                    attrAction('pName',false);
                    attrAction('permission',false);
                    attrAction('iconDiv',false);
                    $('#select_icon_li').show();
                }
            }

            /**
             * id :元素id
             * flag true:禁止输入，false 允许输入
             */
            function attrAction(id, flag){
                var $id= $("#"+id);
                if(flag){
                    $id.val('');
                    $id.attr('disabled','disabled').css('background','#e6e6e6');
                }
                else
                    $id.removeAttr('disabled').css('background','white')
            }

            //绑定关闭按钮
            $('#close').on('click', function(){
                closeWindow(window.name);
            });

            //监听提交
            form.on('submit(add)', function(data){
                data.field['icon']=$('#icon').text();
                $.ajax({
                    url:'/webs/menu/doUpdateMenu',
                    type:'post',
                    data:data.field,
                    dataType: "json",
                    traditional: true,
                    success:function(data){
                        if(data.code == 'SUCCESS'){
                            parent.location.replace(parent.location.href);
                            closeWindow(window.name);
                            window.top.layer.msg("更新成功！",{icon:6,offset: 'rb',area:['200px','80px'],anim:2});
                        }else{
                            window.top.layer.msg("更新失败",{icon: 5});
                        }
                    }
                    ,error:function(){
                        window.top.layer.alert("发生错误！", {icon: 6},function () {
                            closeWindow(window.name);
                        });
                    }
                });
                return false;
            });
            form.render();
        });

    });



</script>

</html>